<template>
    <div class="zsm">
        <van-icon name="arrow-left" @click="fhsyc" class="fhlsjl" />
        <img :src="ztmlsj?.cover" alt="">
    </div>
    <div class="xb">
        <div class="xbwz">{{ ztsj?.title }}</div>
        <div class="xbwz2">{{ ztsj?.share_list?.qq?.desc }}</div>
        <div class="xbwz3">好久不见，欢迎回家。咖啡凉了？换一杯热的吧。</div>
    </div>
    <div class="gxb" v-for="(item, index) in ztsj?.json_content?.oneDataArticles" :key="index" @click="tzyd(item.content_id)">
        <div class="tp">
            <img :src="item.img_url" alt="">
            <div class="tpwz">{{ item.title }}</div>
            <div class="tpzzc"></div>
        </div>
        <div class="dxwz">{{ item.forward }}
            <van-row justify="space-between" class="zdxd">
                <van-col span="12" class="zdxwzzb">{{ item.author.user_name }}</van-col>
                <van-col span="12" class="zdxwzyb">
                    <svg t="1676828403763" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3699" width="14" height="14">
                        <path
                            d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z"
                            fill="#bababa" p-id="3700"></path>
                    </svg>
                    <div style="box-sizing: border-box;padding-right: 10px;color: #bababa;">{{ item.like_count }}</div>
                    <svg t="1676828488257" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6752" width="16" height="16">
                        <path
                            d="M821.527273 428.683636H539.461818c-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272727H821.527273c12.8 0 23.272727 10.472727 23.272727 23.272727s-10.472727 23.272727-23.272727 23.272727zM146.618182 903.447273c-12.8 0-23.272727-10.472727-23.272727-23.272728V587.869091c0-51.665455 23.738182-101.003636 67.025454-138.938182 48.407273-42.356364 117.061818-66.792727 188.741818-66.792727 12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272727c-60.509091 0-118.225455 20.014545-158.021818 55.156364-33.047273 29.090909-51.2 65.861818-51.2 104.029091v292.305454c0 13.032727-10.472727 23.272727-23.272727 23.272728z"
                            fill="#bababa" p-id="6753"></path>
                        <path
                            d="M835.490909 431.010909c-6.749091 0-13.498182-3.025455-18.152727-8.610909l-213.876364-262.981818a23.505455 23.505455 0 0 1 3.258182-32.814546 23.505455 23.505455 0 0 1 32.814545 3.258182l213.876364 262.981818c8.145455 10.007273 6.516364 24.669091-3.258182 32.814546-4.421818 3.723636-9.541818 5.352727-14.661818 5.352727z"
                            fill="#bababa" p-id="6754"></path>
                        <path
                            d="M621.381818 693.992727c-5.12 0-10.24-1.629091-14.661818-5.12a23.272727 23.272727 0 0 1-3.258182-32.814545l213.876364-262.981818a23.272727 23.272727 0 0 1 32.814545-3.258182 23.272727 23.272727 0 0 1 3.258182 32.814545l-213.876364 262.981818c-4.654545 5.585455-11.170909 8.378182-18.152727 8.378182z"
                            fill="#bababa" p-id="6755"></path>
                    </svg>
                </van-col>
            </van-row>
        </div>

    </div>
</template>

<script setup>
import axios from '../plugins/axiosInstance';
import { useRouter } from 'vue-router'
const { onMounted, ref } = require("@vue/runtime-core");
const router = useRouter()
const ztmlsj = ref({})
const ztsj = ref({})
const fhsyc = () => {
    history.go(-1)
}

onMounted(() => {
    ztmlsj.value = JSON.parse(localStorage.getItem('ztmlsj'))
    console.log(ztmlsj.value);
    axios({
        url: `https://apis.netstart.cn/one/topic/htmlcontent/${ztmlsj.value.content_id}`,
        method: 'get'
    }).then((res) => {
        ztsj.value = res.data.data
        console.log(ztsj);
    }).catch(()=>{})
})
function tzyd(id) {
    // 保存阅读id
    localStorage.setItem('yueduId', JSON.stringify(id))
    router.push('/yuedu')
}

</script>

<style lang="less" scoped>
.fhlsjl {
    position: absolute;
    top: 10px;
    left: 10px;
}

.zsm {
    background-color: #005a5b;

    img {
        width: 100%;
    }
}

.xb {
    background-color: #005a5b;
    box-sizing: border-box;
    padding: 10px;

    .xbwz {
        color: #ffa5a4;
        font-size: 18px;
    }

    .xbwz2 {
        color: #ffa5a4;
        font-size: 12px;
        padding-top: 5px;
    }

    .xbwz3 {
        color: #ffa5a4;
        font-size: 14px;
        padding-top: 5px;
        padding: 20px 0;
    }
}

.gxb {
    background-color: #005a5b;
    box-sizing: border-box;
    padding: 10px;
    padding-top: 0;

    .tp {
        width: 100%;
        position: relative;

        img {
            width: 100%;
        }

        .tpwz {
            color: white;
            position: absolute;
            left: 20px;
            bottom: 20px;
            z-index: 10;
        }

        .tpzzc {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
            z-index: 1;
        }
    }
}

.dxwz {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    font-size: 12px;
}

.zdxd {
    box-sizing: border-box;
    padding-top: 20px;
}

.zdxwzzb {
    font-size: 12px;
    color: #bababa;
}

.zdxwzyb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}</style>